<template>
  <div>
    <div class="wrap g-card topBox" style="margin-bottom: 20px">
      <div class="titleBox">
        <span class="title-e">困难件因子配置</span>
      </div>
      <el-form :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select
                v-model="queryParams.bbbb"
                clearable
                filterable
                placeholder="因子名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bbbbList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 50%">
            <el-form-item>
              <div style="display: flex">
                <el-button
                  type="primary"
                  @click="dialogRight = true"
                  size="mini"
                  >配置指标
                </el-button>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                  size="mini"
                  >查询
                </el-button>
                <el-button type="info" plain @click="resetQuery" size="mini"
                  >重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="contentScreenBox">
      <div>
        为您找到以下 <span style="color: #3d7cff"> {{ total }} </span> 条结果
      </div>
    </div>
    <Card>
      <el-table v-loading="loading" :data="tableList1" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="指标" align="center" prop="label" />
        <el-table-column label="5分标准" align="center" prop="infolab1">
        </el-table-column>
        <el-table-column label="2分标准" align="center" prop="infolab2" />
        <el-table-column label="0分标准" align="center" prop="infolab3" />
        <el-table-column label="权重占比" align="center" prop="eeee" />
      </el-table>

      <div class="bottomBox">
        <div class="titleBox">
          <span
            class="title-r"
            style="font-weight: 500; font-size: 16px; color: #293f66"
            >困难件得分配置</span
          >
        </div>
        <div class="wewe">
          当前，本系统中，困难件得分达到
          <span style="color: #3d7cff"> {{ number1 }} </span> 分时，即为困难件。
        </div>
        <div class="eee">
          将得分标准调整为
          <el-input
            placeholder="请输入"
            style="width: 200px; margin-left: 15px"
            v-model="formData1.uerDifConfigParams[0].number"
          >
          </el-input>
        </div>
        <div class="www">调整后，新的困难件得分标准即时生效。</div>
        <div style="display: flex">
          <div class="rrrrr">取消</div>
          <div
            class="rrrrr"
            style="color: #fff; background: #3580ff"
            @click="qqqq"
          >
            保存
          </div>
        </div>
      </div>
    </Card>

    <!-- 侧边 -->
    <el-drawer
      title="配置困难件因子指标"
      :visible.sync="dialogRight"
      direction="rtl"
      custom-class="demo-drawer"
      size="800px"
    >
      <div :style="checked1?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked1" class="rowC">
          销售人员13个月继续率
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="checkedinput1.param1" :disabled='!checked1' @change="change1" class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput1.param2}}% — {{checkedinput1.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="checkedinput1.param4" :disabled='!checked1' @change="change2" class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>

      <div :style="checked2?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked2" class="rowC">
          销售人员出勤率
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder=""  v-model="checkedinput2.param1" :disabled='!checked2' @change="change3" class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput2.param2}}% — {{checkedinput2.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder=""  v-model="checkedinput2.param4" :disabled='!checked2' @change="change4" class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked3" class="rowC">
          销售人员最近一次考核结论
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">清退、降级</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">维持</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">晋升</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked4" class="rowC">
          销售人员是否聘才
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>

      <div :style="checked5?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked5" class="rowC">
          当前服务人员13个月继续率
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="checkedinput5.param1" :disabled='!checked5' class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput5.param2}}% — {{checkedinput5.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="checkedinput5.param4" :disabled='!checked5' class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-checkbox v-model="checked6" class="rowC"> 是否自保件 </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked7" class="rowC"> 是否承接单 </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>

      <div :style="checked8?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked8" class="rowC">
          保单分红水平比
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="checkedinput8.param1" :disabled='!checked8' class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput8.param2}}% — {{checkedinput8.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="checkedinput8.param4" :disabled='!checked8' class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>

      <div :style="checked9?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked9" class="rowC">
          保单期交保费
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="checkedinput9.param1" :disabled='!checked9' class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput9.param2}}% — {{checkedinput9.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="checkedinput9.param4" :disabled='!checked9' class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-checkbox v-model="checked10" class="rowC">
          保单是否加保
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">否</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">是</div>
          </div>
        </div>
      </div>

      <div>
        <el-checkbox v-model="checked11" class="rowC">
          保单是否减保
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>

      <div>
        <el-checkbox v-model="checked12" class="rowC">
          保单既往一次续期交费时间
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">宽末</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">宽一</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">当月</div>
          </div>
        </div>
      </div>

      <div :style="checked13?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked13" class="rowC">
          客户在保司累计退保次数
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="checkedinput13.param1" :disabled='!checked13' class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput13.param2}}% — {{checkedinput13.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="checkedinput13.param4" :disabled='!checked13' class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked14" class="rowC">
          客户是否有投诉记录
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked15" class="rowC">
          客户是否有拒赔记录
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked16" class="rowC">
          客户是否有保单质押
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked17" class="rowC">
          客户是否有保单贷款
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked18" class="rowC">
          客户是否有过减额交清
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked19" class="rowC">
          客户是否有其他失效保单
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">是</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">否</div>
          </div>
        </div>
      </div>
      <div :style="checked20?'':'color: #d1d1d1'">
        <el-checkbox v-model="checked20" class="rowC">
          客户的“重要客户得分”
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">
              0 —
              <el-input placeholder="" v-model="input2" :disabled='!checked20' class="boxD">
              </el-input>
              <span class="font-N">%</span>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">
              <div class="greyF">{{checkedinput20.param2}}% — {{checkedinput20.param3}}%</div>
            </div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">
              <el-input placeholder="" v-model="input2" :disabled='!checked20' class="boxD">
              </el-input>
              <span class="font-N1">%</span>
              以上
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked21" class="rowC">
          客户是否存在职业加费
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">否</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">是</div>
          </div>
        </div>
      </div>
      <div>
        <el-checkbox v-model="checked22" class="rowC">
          客户是否存在健康加费
        </el-checkbox>
        <div class="boxAll">
          <div class="boxA">
            <div class="boxB">5分标准：</div>
            <div class="boxC">否</div>
          </div>
          <div class="boxA">
            <div class="boxB">2分标准：</div>
            <div class="boxC">-</div>
          </div>
          <div class="boxA">
            <div class="boxB">0分标准：</div>
            <div class="boxC">是</div>
          </div>
        </div>
      </div>

      <div class="foot" style="display: flex; justify-content: end">
        <div class="btnBox">
          <el-button plain @click="dialogRight = false">取消</el-button>
          <el-button type="primary" @click="wanawn">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { difconfiglist, difconfigAdd } from "@/api/system/dataNew";
export default {
  name: "RuleConf",
  data() {
    return {
      checked1: null,
      checked2: null,
      checked3: null,
      checked4: null,
      checked5: null,
      checked6: null,
      checked7: null,
      checked8: null,
      checked9: null,
      checked10: null,
      checked11: null,
      checked12: null,
      checked13: null,
      checked14: null,
      checked15: null,
      checked16: null,
      checked17: null,
      checked18: null,
      checked19: null,
      checked20: null,
      checked21: null,
      checked22: null,
      dialogRight: false,
      checkedinput1: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput2: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput5: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput8: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput9: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput13: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      checkedinput20: {
        number: "",
        param1: "",
        param2: "自动生成",
        param3: "自动生成",
        param4: "",
      },
      multipleSelection: [],
      queryParams: {},
      total: 4,
      bbbbList: [
        {
          id: 1,
          name: "业务员过往继续率",
        },
        {
          id: 2,
          name: "险种产品类别",
        },
        {
          id: 3,
          name: "业务员出勒次数",
        },
      ],
      loading: false,
      tableList: [
        {
          label: "业务员过往继续率",
          num: "9",
          cccc: ">=90%年金",
          dddd: "80%-90%",
          eeee: "<80%或空",
          ffff: true,
        },
        {
          label: "险种产品类别",
          num: "29",
          cccc: ">=90%年金",
          dddd: "80%-90%",
          eeee: "<80%或空",
          ffff: true,
        },
        {
          label: "业务员出勒次数",
          num: "39",
          cccc: ">=90%年金",
          dddd: "80%-90%",
          eeee: "<80%或空",
          ffff: true,
        },
        {
          label: "是否有过退保",
          num: "49",
          cccc: ">=90%年金",
          dddd: "80%-90%",
          eeee: "<80%或空",
          ffff: true,
        },
      ],
      tableList1: [],
      formData1: {
        type: "B",
        uerDifConfigParams: [
          {
            number: "",
          },
        ],
      },
      number1: 0,
    };
  },
  mounted() {
    this.rrr();
    this.search();
  },
  methods: {
    wanawn() {
      let formData= {
        type: "A",
        uerDifConfigParams: [],
      }
      console.log(this.checked1, this.checked2);
      this.search();
    },
    change1(value){
      if(value){
        this.checkedinput1.param2=+value+1
      }else{
        this.checkedinput1.param2='自动生成'
      }
    },
    change2(value){
      if(value){
        this.checkedinput1.param3=+value-1
      }else{
        this.checkedinput1.param3='自动生成'
      }
    },
    change3(value){
      if(value){
        this.checkedinput2.param2=+value+1
      }else{
        this.checkedinput2.param2='自动生成'
      }
    },
    change4(value){
      if(value){
        this.checkedinput2.param3=+value-1
      }else{
        this.checkedinput2.param3='自动生成'
      }
    },
    search() {
      const obj = {
        configtype: "A",
      };
      difconfiglist(obj).then((res) => {
        this.tableList1 = res.rows;
      });
    },
    resetQuery() {},

    rrr() {
      difconfiglist({ configtype: "B" }).then((res) => {
        this.number1 = res.rows[0].number;
      });
    },
    qqqq() {
      difconfigAdd(this.formData1).then((res) => {
        if (res.code == 200) {
          this.formData1 = {
            type: "B",
            uerDifConfigParams: [
              {
                number: "",
              },
            ],
          };
          this.rrr();
        }
      });
    },

  },
};
</script>
<style lang="less" scoped>
.topBox {
  background: linear-gradient(166deg, #eaf0fc 0%, #ffffff 100%);
  padding-left: 20px;
}
.trans-item {
  display: flex;
  justify-content: space-around;
  width: 480px;
}

.trans-cla /deep/ .el-checkbox__label {
  font-size: 12px;
}
.contentScreenBox {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  color: #6e6e6e;
}
.bottomBox {
  margin-top: 25px;
  .wewe {
    margin: 15px 0;
  }
  .www {
    margin: 15px 0;
    color: red;
  }
  .rrrrr {
    width: 80px;
    height: 38px;
    border: 1px solid #3580ff;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3580ff;
    margin-right: 20px;
  }
}
</style>
<style lang="less">
.trans-cla > .el-transfer-panel:first-child {
  width: 20% !important;
}

.trans-cla > .el-transfer-panel:last-child {
  width: 68% !important;

  .el-transfer-panel__body {
    .el-checkbox-group {
      .el-checkbox {
        margin-bottom: 10px;
      }
    }
  }
}

.trans-cla {
  position: relative;
  width: 100%;

  .el-transfer-panel {
    // width: 50%;

    .el-transfer-panel__header {
      .el-checkbox {
        .el-checkbox__label {
          font-size: 14px;
        }
      }
    }
  }

  .el-transfer__buttons {
    padding: 0 10px;
  }
  ::v-deep .el-button--primary {
    background: #1990ff;
  }
}
.titleBox {
  display: flex;
  padding: 4px 14px 0 14px;

  .title-r {
    font-weight: 500;
    font-size: 16px;
    color: #3d7cff;
    position: relative;

    &::before {
      position: absolute;
      top: 50%;
      left: -12px;
      transform: translateY(-50%);
      content: "";
      width: 5px;
      height: 15px;
      background: linear-gradient(180deg, #43dfa3 0%, #3685fa 100%);
      border-radius: 2px;
    }
  }
  .title-e {
    font-weight: 500;
    font-size: 16px;
    color: #3d7cff;
    position: relative;

    &::before {
      position: absolute;
      top: 50%;
      left: -12px;
      transform: translateY(-50%);
      content: "";
      width: 5px;
      height: 15px;
      background: #3d7cff;
    }
  }
}
.btn-more {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #3d7cff;
  padding: 7px;
  font-size: 14px;
  color: #3d7cff;
}
</style>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
.rowA {
  margin-bottom: 20px;
}
.rectangle {
  width: 5px;
  height: 15px;
  background-color: #3c74ff;
  display: inline-block;
  margin-right: 8px;
}
.font-a {
  color: #3c74ff;
  font-size: 18px;
  font-weight: 500;
}
.blockAll {
  display: flex;
  width: 70%;
  margin-bottom: 15px;
}
.blockA {
  display: flex;
  background-color: #fff;
  flex: 1;
  height: 50px;
  margin-right: 30px;
  border-radius: 3px;
  box-shadow: 5px 5px 10px 0px gray;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
}
.font-b {
  text-align: center;
  flex: 1;
}
.font-c {
  text-align: center;
  font-size: 16px;
  flex: 1;
}
.boxAll {
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
  margin-bottom: 15px;
}
.boxA {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.boxB {
  flex: 1;
  padding-left: 10px;
}
.boxC {
  flex: 2;
  position: relative;
}
.greyF {
  color: #d1d1d1;
}
.boxD {
  width: 70%;
}
.font-N {
  display: inline-block;
  position: absolute;
  top: 19%;
  right: 27px;
}
.font-N1 {
  display: inline-block;
  position: absolute;
  top: 19%;
  right: 54px;
}
.rowC {
  margin-left: 30px;
  margin-bottom: 15px;
}

.card-user-infor-name {
  font-size: 22px;
}
.avator-img {
  display: block;
  width: 80%;
  max-width: 100px;
  height: auto;
}
.info {
  p {
    img {
      width: 18px;
      height: 18px;
    }
  }
}
.card_info {
  height: 150px;
  width: 700px;
  div {
    height: 100%;
    div {
      border-radius: 5px;
      margin: 0 15px;
    }
  }
}
.cardInfo {
  width: 100px;
}
</style>
